<template>
  <FModal header="请设置值" ref="refFModal" @ok="setMenuRangeFieldValueToOrigin" width="600">
    <div class="field-value-configuration-wrapper">
      <div class="field-value-configuration-row">
        <div class="field-value-configuration-title">
          <el-radio-group @change="systemValueTypeChange"
                          v-model="menuActionRange.systemValue">
            <el-radio :model-value="false" :label="false">
              手工
            </el-radio>
          </el-radio-group>
        </div>
        <div class="field-value-configuration-body">
          <InputDelegate @fieldValueChange="fieldValueChange" ref="refComponent" style="width: 100%"
                     :component="menuActionRange.fieldComponent" :field="field"
                     :auth="menuActionRange.systemValue ? 'hide' : 'edit'"/>

        </div>
      </div>
      <div class="field-value-configuration-row">
        <div class="field-value-configuration-title">
          <el-radio-group @change="systemValueTypeChange"
                          v-model="menuActionRange.systemValue">
            <el-radio :model-value="true" :label="true">
              系统变量
            </el-radio>
          </el-radio-group>
        </div>
        <div class="field-value-configuration-body">
          <el-select v-model="menuActionRange.fieldValue" style="width: 100%"
                     :disabled="!menuActionRange.systemValue" @change="systemValueChange"
                     clearable filterable placeholder="请选择系统变量">
            <el-option v-for="opt in inputComponentDefaultValueOptions"
                       :key="opt.value" :label="opt.title" :value="opt.value"/>
          </el-select>
        </div>
      </div>
    </div>
  </FModal>
</template>

<script setup>
import FModal from '@/components/FModal/index.vue';
import {computed, nextTick, ref, unref} from 'vue';
import {DefaultMenuActionRange} from '@/components/form/DefaultFormDefinition';
import {InputComponentDefaultValues} from '@/components/form/SystemVariables';
import InputDelegate from '@/components/form/FormInputDelegates/InputDelegate.vue';

const refFModal = ref();
const refComponent = ref();
const emit = defineEmits(['fieldValueChange']);
const menuActionRange = ref(JSON.parse(JSON.stringify(DefaultMenuActionRange)));
let originMenuActionRange = undefined;
const field = ref();

function setData(_menuActionRange, _field) {
  field.value = _field;
  originMenuActionRange = _menuActionRange;
  menuActionRange.value = JSON.parse(JSON.stringify(_menuActionRange));
  refFModal.value.open();

  nextTick(() => {
    setComponentValue();
  });
}

function setComponentValue() {
  if (menuActionRange.value.systemValue) {
    refComponent.value.resetField();
  } else {
    refComponent.value.setFieldValue(menuActionRange.value.fieldValue);
  }
}

function systemValueTypeChange() {
  menuActionRange.value.fieldValue = undefined;
  menuActionRange.value.fieldValueTitle = undefined;

  refComponent.value.resetField();
}

function systemValueChange(fieldValue) {
  let opt = inputComponentDefaultValueOptions.value.find(i => i.value === fieldValue);
  menuActionRange.value.fieldValueTitle = opt.title;
}

function setMenuRangeFieldValueToOrigin() {
  if (menuActionRange.value.systemValue) { //系统变量
    originMenuActionRange.fieldValue = menuActionRange.value.fieldValue;
    originMenuActionRange.fieldValueTitle = menuActionRange.value.fieldValueTitle;
  } else { //手工
    let value = refComponent.value.getFieldValue({});
    let valueTitle = refComponent.value.getFieldValueText();

    originMenuActionRange.fieldValue = value;
    originMenuActionRange.fieldValueTitle = valueTitle;
  }
  originMenuActionRange.systemValue = menuActionRange.value.systemValue;

  unref(refFModal).close();
}

function fieldValueChange() {

}

const inputComponentDefaultValueOptions = computed(() => {
  return InputComponentDefaultValues[menuActionRange.value.fieldComponent];
});

defineExpose({
  setData
});

</script>
<style class="field-value-configuration-wrapper">
.field-value-configuration-wrapper {
  padding: 0 20px;
}

.field-value-configuration-body {
  flex: 1;
}

.field-value-configuration-row {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.field-value-configuration-title {
  width: 130px;
}
</style>
